<template>
    <div class="father">
        {{ msg }}
        <!-- 使用$event占位符显示拿到事件对象 -->
        <!-- <button @click = eventObj(68,$event)>事件对象</button> -->
        <button @click = "msg = $event">事件对象</button>
        <br>
        <div v-show="sonData">{{sonData}}</div>

        <!--lxy-Event：羊肉串命名 -->
        <Child @lxy-Event="LxyEventFun"></Child>
    </div>
</template>
<script setup   lang="ts">
import {ref} from 'vue'
import Child from './Child.vue'
let msg = ref("Hello Vue3!");
let sonData = ref("");

//保存子组件传递过来的数据
function LxyEventFun(valueVar:string){
    // console.log("子组件给父组件传递数据成功!",valueVar);
    sonData.value = valueVar;
}

//函数不传参默认拿到事件对象
function eventObj(x:number,e:Event){
    console.log("luckNumber ",x,"事件对象",e);
}
</script>
<style scoped>
.father{
    width: 100vw;
    background-color: rgb(109, 224, 33);
}
</style>
